Jest에서 localStorage 사용하기

자바스크립트로 테스트 코드를 작성할 때 Jest를 많이 사용합니다. Jest는 자바스크립트 테스트 환경으로 널리 사용되지만, 실행 환경이 브라우저가 아닌 Node.js이기 때문에 localStorage나 sessionStorage를 사용하는 코드에서 다음과 같은 오류가 발생할 수 있습니다.

ReferenceError: localStorage is not defined

이는 Node.js 환경에는 브라우저의 Web API인 localStorage와 sessionStorage가 기본적으로 존재하지 않기 때문입니다.

해결 방법

이 문제는 jest-localstorage-mock 패키지를 사용하면 간단하게 해결할 수 있습니다. 이 패키지는 Jest 테스트 환경에서 localStorage와 sessionStorage를 자동으로 Mock 처리해줍니다.

1. 패키지 설치

npm install --save-dev jest-localstorage-mock

2. Jest 설정 파일 수정

설치 후, jest.config.js 또는 jest.config.ts 파일에 setupFiles 옵션을 추가합니다. 이 설정을 통해 테스트 실행 전에 자동으로 mocking이 적용됩니다.

module.exports = {
  // 기타 설정들
  setupFiles: ["jest-localstorage-mock"],
};

3. 테스트 실행

이제 localStorage와 sessionStorage를 사용하는 코드도 문제 없이 테스트할 수 있습니다.

localStorage.setItem("token", "abc123");
expect(localStorage.getItem("token")).toBe("abc123");

결론

Jest 환경에서 localStorage나 sessionStorage를 사용할 경우 오류가 발생할 수 있지만, jest-localstorage-mock을 활용하면 손쉽게 해결할 수 있습니다.